<template>
    <div class="home">
        <el-container style="height:100%;">
            <el-aside width="230px" class="aside">
                <div :class="['logo',{collapse:isCollapse}]">
                  <i class="iconfont icon-meishi"></i>
                  E站圈三亚学院站
                 
                </div>
                <left-menu :isCollapse="isCollapse"></left-menu>
            </el-aside>
            <el-container>
                <el-main id="container">
                    <common-header></common-header>
                    <!-- 一部分页面需要被缓存 -->
                    <keep-alive>
                        <router-view v-if="$route.meta && $route.meta.keepAlive"></router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta || !$route.meta.keepAlive"></router-view>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import LeftMenu from "@/pages/home/components/LeftMenu";
    import CommonHeader from "@/pages/home/components/header";
    export default {
      name: "App",
      data() {
        return {
          tabIndex: "1",
          isCollapse: false
        };
      },
      components: {
        LeftMenu,
        CommonHeader
      },
      methods: {}
    };
</script>

<style lang="less">
    .home {
      height: 800px;

      .logo {
        width: 200px;
        height: 100px;
        background: #273a4a;
        color:white;
        display: table-cell;
        text-align: center;
        vertical-align: middle;

        img {
          width: 60px;
        }
      }

      .collapse {
        width: 99px;

        img {
          width: 40px;
        }
      }

      .aside {
        overflow-y: scroll;
        overflow-x: hidden;
        background-color: rgb(48, 57, 62);
        .icon-meishi {
          font-size: 35px;
          vertical-align: middle;
          margin: 0 10px 0 20px;
          color: #ffd04b;
          text-shadow: none;
        }
      }

      .common_header {
        padding: 0;
      }

      #container {
        min-width: 1250px;
      }
    }
</style>
